<template>
    <div class="dept_title">部门设置</div>
    <div class="dept_where">
        <span>单位编号：</span><el-input class="dept_input" v-model="measure_code" style="width: 240px" />
        <span>单位昵称：</span><el-input class="dept_input" v-model="measure_name" style="width: 240px" />
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="addEdit" style="float: right;">添加</el-button>
    </div>
    <hr style="margin: 20px 0px;">
    <div class="table-container">
        <el-table :data="tableData" stripe style="width: 100%" border>
            <!-- <el-table-column prop="dept_id" label="序号" /> -->
            <el-table-column prop="measure_code" label="单位编号" />
            <el-table-column prop="measure_name" label="单位名称"/>
            <el-table-column prop="measure_host" label="是否主单位" >
                <template #default="scope">
                    <span>{{ scope.row.measure_host == 0 ? "是" : "否" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="measure_scale" label="与主单位换算比例" />
            <el-table-column prop="measure_enable" label="是否启用">
                <template #default="scope">
                    <span>{{ scope.row.measure_enable == 0 ? "是" : "否" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">
                        修改
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row.measure_id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
                :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="pageCount"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
    <el-dialog v-model="dialogVisible1" title="删除部门信息" width="500" :before-close="handleClose">
        <span>确定删除该条单位信息吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close1">取消</el-button>
                <el-button type="primary" @click="del">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- <el-dialog v-model="dialogVisible2" title="编辑单位信息" width="400" :before-close="handleClose" :show-close="false">
        <el-form name="configfilefirstkindForm" method="post" ref="ruleFormRef" :model="db" :rules="rules"
            class="demo-ruleForm">

            <el-form-item prop="measure_code" label="单&nbsp&nbsp位&nbsp&nbsp&nbsp编&nbsp&nbsp码">
                <el-input v-model="db.measure_code" placeholder="单位编码" clearable
                    style="width: 240px;margin-left: 23px;" />
            </el-form-item>

            <el-form-item label="单位昵称">
                <el-select v-model="db.measure_code" placeholder="单位昵称" style="width: 240px;margin-left: 23px;">
                    <el-option v-for="item in options" :key="item.dept_id" :label="item.dept_name"
                        :value="item.dept_id" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否是主单位">
                <el-radio-group v-model="db.measure_code" style="margin-left: 42px;">
                    <el-radio value="0">正常</el-radio>
                    <el-radio value="1">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="db.measure_code" style="margin-left: 42px;">
                    <el-radio value="0">正常</el-radio>
                    <el-radio value="1">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="measure_code" label="备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注">
                <el-input v-model="db.measure_code" placeholder="部门负责人" clearable style="width: 240px;" />
            </el-form-item>
            
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="deptAdd">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog> -->
    <el-drawer v-model="dialogVisible2" :title="title" :direction="direction" :before-close="handleClose" size="30%"
        :show-close="false" @close="close">
        <!-- 添加外层容器并设置 flex 布局 -->
        <div style="display: flex; justify-content: center; height: 100%;">
            <el-form name="configfilefirstkindForm" method="post" ref="ruleFormRef" :model="dept" :rules="rules"
                style="width: 80%; margin-top: 20px;">
                <!-- 调整所有表单项目的样式 -->
                <el-form-item prop="measure_code" label="单位编码" style="display: flex; justify-content: center;">
                    <el-input v-model="db.measure_code" placeholder="单位编码" clearable style="width: 100%;" />
                </el-form-item>

                <el-form-item prop="measure_code" label="单位名称" style="display: flex; justify-content: center;">
                    <el-input v-model="db.measure_code" placeholder="单位名称" clearable style="width: 100%;" />
                </el-form-item>

                <el-form-item label="是否是主单位" style="display: flex; justify-content: center;" >
                    <el-radio-group v-model="db.measure_code">
                        <el-radio value="0">是</el-radio>
                        <el-radio value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                
                <el-form-item prop="measure_code" label="与主单位换算比例" style="display: flex; justify-content: center;">
                    <el-input v-model="db.measure_code" placeholder="单位名称" clearable style="width: 100%;" />
                </el-form-item>

                <el-form-item label="是否启用" style="display: flex; justify-content: center; margin-left: 26px;">
                    <el-radio-group v-model="db.measure_code">
                        <el-radio value="0">是</el-radio>
                        <el-radio value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item prop="measure_code" label="备注" style="display: flex; justify-content: center;">
                    <el-input v-model="db.measure_code" placeholder="备注" clearable style="width: 100%;" />
                </el-form-item>
            </el-form>
        </div>

        <!-- 底部按钮居中 -->
        <template #footer>
            <div class="dialog-footer" style="text-align: center;">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="deptAdd">确定</el-button>
            </div>
        </template>
    </el-drawer>

</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import axios from 'axios';
import dayjs from 'dayjs'
import { ElLoading, ElMessage } from 'element-plus'
export default {
    setup() {
        const tableData = ref()
        const measure_code = ref("")//单位编号
        const measure_name = ref("")//单位昵称
        const currentPage = ref(1)//当前页
        const pageSize = ref(5)//每页显示数
        const pageCount = ref(0)//总记录数

        const dialogVisible1 = ref(false);//删除拟态框
        const measure_id = ref("0");//单位id
        const sc = ref("1");//删除单位

        const dialogVisible2 = ref(false);//编辑单位
        const db = reactive({
            measure_code: "",
            measure_name: "",
            measure_host: "",

            })

        const page = computed(() => {
            return Math.ceil(pageCount.value / pageSize.value)
        });//总页数
        onMounted(() => {
            fill()
            count()
        })
        //分页查询、条件查询
        function fill() {
            axios.get("http://localhost:5181/api/Db_Measure/SelectDb_MeasureFYWHERE", {
                params: {
                    Measure_code: measure_code.value,
                    Measure_name: measure_name.value,
                    currentPage: currentPage.value,
                    pageSize: pageSize.value
                },
                headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                tableData.value = result.data
                console.info(result.data)
            }).catch((err) => {
                console.info(err)
            });
        }

        //查询总条数
        function count() {
            axios.get("http://localhost:5181/api/Db_Measure/Db_MeasureCount", {
                params: {
                    Measure_code: measure_code.value,
                    Measure_name: measure_name.value
                },
                headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                pageCount.value = result.data
                console.info(result)
            }).catch((err) => {
                console.info(err)
            });
        }
        //条件查询
        function query(){
            fill();
            console.log(1212+measure_code.value);
        }
        //清空条件查询
        function reset(){
            measure_code.value = "";
            measure_name.value = "";
            fill();
        }
        //添加计量单位
        function addEdit(){

        }
        //修改
        function handleEdit(){
            dialogVisible2.value = true;
        }
        //取消修改
        function close(){
            dialogVisible2.value = false;
        }
        //逻辑删除计量单位
        function handleDelete(row){
            dialogVisible1.value = true;
            measure_id.value = row;
            console.log(measure_id.value);
        }
        //取消删除
        function close1(){
            measure_id.value = "0";
            dialogVisible1.value = false;
        }
        //确认删除
        function del(){
            axios.put("http://localhost:5181/api/Db_Measure/Db_MeasureDelete",{
                measure_id:measure_id.value,
                del_flag:sc.value
            },{
                headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                if(result.data == 1){
                    ElMessage({
                        type: 'success',
                        message: '删除成功'
                    });
                    fill();
                    dialogVisible1.value = false;
                }
            })
        }

        return {
            handleEdit,
            query,
            reset,
            addEdit,
            handleDelete,
            tableData,
            measure_code,
            measure_name,
            dialogVisible1,
            measure_id,
            close1,
            del,
            dialogVisible2,
            db,
            close
        }
    }
}
</script>

<style scoped>
.el-select__wrapper {
    margin-left: 24px;
}

.dept_title {
    float: left;
    font-weight: bold;
    margin-top: -10px;
    font-size: 20px;
}

.dept_where {
    text-align: center;
    margin-left: -340px;
    margin-top: 40px;
}

.dept_input {
    margin-right: 20px;
}

#pageDiv {
    padding: 10px;
}

.div {
    width: 410px;
    height: 25px;
    /* background-color: black; */
    margin-left: 400px;
    margin-top: -23px;
    line-height: 25px;
}

.span1 {
    margin-left: -990px;
    font-size: 14px;
}

.div button {
    margin: 0 5px;
    background-color: #00000000;
    border: 0px;
}

.div a {
    margin: 0 5px;
}

a {
    text-decoration: none;
    color: white;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: inherit;
    background-color: #ffffbb;
    border-style: solid;
    border-width: 0;
}

.table-container {
    display: flex;
    flex-direction: column;
    /* 垂直排列 */
    gap: 20px;
    /* 表格和分页之间的间距 */
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    margin-top: 20px;
    /* 与表格的间距 */
}
</style>